<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>图片预览图</title>
    <style>
        * { margin: 0; padding: 0;}
        #dowebok { width: 800px; margin: 0 auto; font-size: 0;}
        #dowebok li {  display: inline-block;width: 50px;height: 50px; margin-left: 1%; padding-top: 1%;}
        /*#dowebok li img { width: 200%;}*/
    </style>
    <script th:inline="javascript">ctx = [[${ctx}]];</script>
    <link rel="stylesheet" th:href="${ctx}+'css/viewer.min.css'">
</head>
<body>
<ul id="dowebok">
    <li><img id="img_div" url="" src="" width="1px" height="1px"></li>
</ul>

<script th:src="${ctx}+'lib/viewer/viewer.min.js'" type="text/javascript"></script>
<script th:inline="javascript">name = [[${name}]];value = [[${value}]];</script>
<script type="text/javascript">
    var param = '';
    if (name == 'file') {
        param = '/' + value;
    } else {
        param += '?' + name + '=' + value;
    }
    var url = encodeURI(ctx + 'public/file/preview' + param);

    document.getElementById("img_div").setAttribute("url", url);
    document.getElementById("img_div").setAttribute("src", url);
    new Viewer(document.getElementById("dowebok"), {
        url: "src",
        navbar: false
    });
    document.getElementById("img_div").click();
</script>
</body>
</html>
